<template>

  <div
    v-loading="listLoading"
    class="app-container"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
  >

    <div class="todo-list">
      <el-row :gutter="18" v-if="todoList.length>0">

        <el-col class="todo-item" :span="4" v-for="(item,index) in todoList" :key="index">
          <div @click="toPage(item)">
            <el-statistic :value="item.value" :title="item.label" :value-style="{color:item.color}">
              <template slot="suffix">
                <span>
                   {{ item.unit }}
                </span>
              </template>
            </el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>


    <div v-if="list.length" class="items">
      <echarts
        v-for="(item,index) in list"
        :key="index"
        ref="chartDom"
        class="echart-item"
        :option="item.option"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import api from '@/api/statistics'
import Echarts from '@/components/echart/Echarts.vue'

export default {
  name: 'Dashboard',
  components: {
    Echarts
  },
  data() {
    return {
      listLoading: true,
      list: [],
      todoList: []
    }
  },
  created() {
    this.get_data()
  },

  methods: {
    toPage(item) {
      console.log(item)
      this.$router.push({ name: item.route_name })
    },
    get_data() {
      api.getList().then(res => {
        if (res.code === 0) {
          this.list = res.data.charts
          this.todoList = res.data.todoList
        }
      }).finally(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  margin-top: 100px;
  padding: 20px;

  .todo-list {
    margin-bottom: 50px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .todo-item {
      cursor: pointer;
    }

    .el-statistic {
      margin-top: 10px;
    }
  }

  .echart-item {
    height: 250px;
  }
}
</style>

